import React from 'react';
import {BrowserRouter, Route, NavLink} from 'react-router-dom';


function A() {
    return <h1>组件A</h1>
}

function B() {
    return <h1>组件B</h1>
}

function C() {
    return <h1>组件C</h1>
}

function LinkInfo(props) {
    return (
        <div>
            <BrowserRouter>
                <Route path="/a" component={A} exact={true} sensitive={true}/>
                <Route path="/b" component={B} exact={true} sensitive={true}/>
                <Route path="/c" component={C} exact={true} sensitive={true}/>
                <div>
                    <NavLink activeClassName={'a_active'} to={'/a'}>组件A</NavLink>
                    <NavLink activeStyle={{color:'red'}} style={{margin: 50}} to={'/b'}>组件B</NavLink>
                    <NavLink to={'/c'} exact={true} sensitive={true} strict={true} replace={true} >组件C</NavLink>
                </div>
            </BrowserRouter>
        </div>
    );
}

export default LinkInfo;